<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航案例</title>
		<style>
			ul{
				width: 800px;
				height: 60px;
				border: 1px solid black;
				background-color:darkgray;
			}
			ul li{
				display: inline;
				width: 30px;
				height: 60px;
				margin-left: 20px;
			}
			.li1{
				color: red;
			}
			.li2{
				color: black;
			}
			ul li:hover{
				background-color: gainsboro;
				color: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a class="li1" href="#">天猫</a></li>
			<li><a class="li1" href="#">聚划算</a></li>
			<li><a class="li1" href="#">超市</a></li>
			<li><a class="li1" href="#">头条</a></li>
			<li><a class="li2" href="#">阿里旅行</a></li>
			<li><a class="li2" href="#">电器城</a></li>
			<li><a class="li2" href="#">淘抢购</a></li>
			<li><a class="li2" href="#">苏宁易购</a></li>
			<li><a class="li2" href="#">智能生活</a></li>
		</ul>
	</body>
</html>
